<template>
  <view>
    <scroll-view scroll-y class="page">
      <!-- 头部logo-->
      <view class="UCenter-bg">
        <image
          :src="personalList.avatar"
          class="png round animation-slide-right margin-bottom-sm"
          mode="scaleToFill"
          :style="[{ animationDelay: '0.1s' }]"
        ></image>
        <image src="" mode="scaleToFill" class="gif-wave"></image>
      </view>
      <view class="padding flex text-center text-grey bg-white shadow-warp">
        <view
          class="flex flex-sub flex-direction solid-right animation-slide-top"
          :style="[{ animationDelay: '0.2s' }]"
        >
          <view class="text-xl text-orange">{{ personalList.username }}</view>
          <view class="margin-top-sm"
            ><text class="cuIcon-people"></text> 用户</view
          >
        </view>

        <view
          class="flex flex-sub flex-direction animation-slide-top"
          :style="[{ animationDelay: '0.2s' }]"
        >
          <!-- <view class="text-xl text-green">{{
            personalList.post ? personalList.post : "员工"
          }}</view> -->
          <view class="margin-top-sm"
            ><text class="cuIcon-news"></text> 13297928628</view
          >
        </view>
      </view>
      <!-- 列表list-->
      <view
        class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius"
      >
        <!-- <view
          class="cu-item arrow "
          :style="[{ animationDelay: '0.1s' }]"
        >
          <view class="content">
            <text class="cuIcon-favorfill text-yellow"></text>
            <text class="text-grey">个人信息</text>
          </view>
        </view> -->

        <navigator
          class="cu-item arrow"
          url="/pages/user/userdetail"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-favorfill text-yellow"></text>
            <text class="text-grey">个人信息</text>
          </view>
        </navigator>

        <!-- <view
          class="cu-item arrow "
          :style="[{ animationDelay: '0.2s' }]"
        >
          <view class="content">
            <text class="cuIcon-phone text-red"></text>
            <text class="text-grey">修改手机号码</text>
          </view>
        </view> -->

        <navigator
          class="cu-item arrow"
          url="/pages/user/editphone"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-phone text-red"></text>
            <text class="text-grey">修改手机号码</text>
          </view>
        </navigator>
        <navigator
          class="cu-item arrow"
          url="/pages/user/editpassword"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-edit text-red"></text>
            <text class="text-grey">修改密码</text>
          </view>
        </navigator>
        <!-- <view
          class="cu-item arrow "
          :style="[{ animationDelay: '0.3s' }]"
          @tap="scan"
        >
          <view class="content">
            <text class="cuIcon-scan text-red"></text>
            <text class="text-grey">修改密码</text>
          </view>
        </view> -->
        <!-- <navigator
          class="cu-item arrow "
          :style="[{ animationDelay: '0.4s' }]"
          url="/pages/user/location"
          hover-class="none"
        >
          <view class="content">
            <text class="cuIcon-location text-cyan"></text>
            <text class="text-grey">消息通知</text>
          </view>
        </navigator> -->
        <navigator
          class="cu-item arrow"
          url="/pages/user/userset"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-settingsfill text-cyan"></text>
            <text class="text-grey">雷达信息设置</text>
          </view>
        </navigator>

        <navigator
          @tap="logout"
          class="cu-item arrow"
          :style="[{ animationDelay: '0.7s' }]"
          hover-class="none"
        >
          <view class="content">
            <text class="cuIcon-exit text-cyan"></text>
            <text class="text-grey">退出</text>
          </view>
        </navigator>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  name: "people",
  data() {
    return {
      personalList: {
        avatar: "",
        realname: "",
        username: "",
        post: "",
      },
      positionUrl: "/sys/position/list",
      departUrl: "/sys/user/userDepartList",
      userUrl: "/sys/user/queryById",
      postUrl: "/sys/position/queryByCode",
      userId: "",
      id: "",
    };
  },
  watch: {
    cur: {
      immediate: true,
      handler() {
        console.log("watch", this.cur);
        this.userId = this.$store.getters.userid;
        this.load();
      },
    },
  },
  methods: {
    logout() {
      uni.showModal({
        title: "",
        content: "确认要退出吗？",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("Access-Token");
            uni.navigateTo({
              url: "/pages/login/login",
            });
            setTimeout(() => {
              location.reload();
            }, 10);
          }
        },
      });
    },
    // scan() {
    //   console.log("进来了");
    //   // #ifndef H5
    //   uni.scanCode({
    //     success: function (res) {
    //       console.log("条码res：" + res);
    //       console.log("条码类型：" + res.scanType);
    //       console.log("条码内容：" + res.result);
    //     },
    //   });
    //   // #endif
    //   // #ifdef H5
    //   this.$tip.alert("暂不支持");
    //   // #endif
    // },
    load() {
      if (!this.userId) {
        return;
      }
      this.$http
        .get(this.userUrl, { params: { id: this.userId } })
        .then((res) => {
          console.log("res", res);
          if (res.data.success) {
            let perArr = res.data.result;
            let avatar =
              perArr.avatar && perArr.avatar.length > 0
                ? api.getFileAccessHttpUrl(perArr.avatar)
                : "/static/avatar_boy.png";
            this.personalList.avatar = avatar;
            this.personalList.realname = perArr.realname;
            this.personalList.username = perArr.username;
            this.personalList.depart = perArr.departIds;
            this.getpost(perArr.post);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getpost(code) {
      if (!code || code.length == 0) {
        this.personalList.post = "员工";
        return false;
      }
      this.$http
        .get(this.postUrl, { params: { code: code } })
        .then((res) => {
          console.log("postUrl", res);
          if (res.data.success) {
            this.personalList.post = res.data.result.name;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.uni-modal__hd {
  margin-top: 25px !important;
}
.UCenter-bg {
  /* #ifdef MP-WEIXIN */
  /* background-image: url("https://static.jeecg.com/upload/test/blue_1595818030310.png"); */
  /* background-image: url("/static/bg1.jpg"); */
  /* #endif */
  /* #ifndef MP-WEIXIN */
  background-image: url("/static/bg2.png");
  /* #endif */
  background-size: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.uni-modal .uni-modal__bd {
  color: #000 !important;
  font-size: 22px !important;
}
.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}

map,
.mapBox {
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}

map,
.mapBox {
  width: 750rpx;
  height: 300rpx;
}
</style>
